<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="formInline.status" style="width:100px">
            <el-option v-for="item in status_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="from" style="width:100px">
            <el-option v-for="item in from_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select style="width:300px" filterable v-model="formInline.receive_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="type" style="width:100px">
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="check_id" @change="checkChange" style="width:120px">
            <el-option v-for="item in check_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input style="width:300px" v-model="order_id" :placeholder="checkPld" @keyup.enter.native="searchClick"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label='序号' width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="收货单号" prop="send_order_no"></el-table-column>
        <el-table-column align="center" label="采购单号" prop="order_id"></el-table-column>
        <el-table-column align="center" label="采购渠道" prop="from_name"></el-table-column>
        <el-table-column align="center" label="下单类型" prop="type_name"></el-table-column>
        <el-table-column align="center" label="发货方" prop="supplier_name"></el-table-column>
        <el-table-column align="center" label="收货方" prop="store_name"></el-table-column>
        <el-table-column align="center" label="收货仓" prop="house_name"></el-table-column>
        <el-table-column align="center" label="收货人" prop="name"></el-table-column>
        <el-table-column align="center" label="电话" prop="phone"></el-table-column>
        <el-table-column align="center" label="收货状态" prop="status_name"></el-table-column>
        <!-- 列表的操作按钮 -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <router-link :to="{name:'warehouse/rlInfo',params :{id:scope.row.send_id,routerflag:1}}">
              <el-button type="primary" plain size="mini">详情</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, getPage, getStoreHouse, getComHouse } from '@/api/warehouse/receNoteList';
import { getStoreList } from '@/api/report/supOGItem';
export default {
  data() {
    return {
      listLoading: false,
      all_store_id: '',
      status_list: [
        { id: '1', name: '待确认' },
        { id: '2', name: '待收货' },
        { id: '3', name: '收货中' },
        { id: '4', name: '收货完成' },
        { id: '5', name: '已关闭' }
      ],
      store_list: [],
      com_house_list: [], //总部仓库名称
      stor_house_list: [], //门店仓库名称
      from_list: [
        { id: '0', name: '全部' },
        { id: '2', name: '中央仓' },
        { id: '1', name: '供应商' }
      ],
      check_list: [
        { id: '1', name: '按收货单号' },
        { id: '2', name: '按采购单号' }
      ],
      type_list: [
        { id: '0', name: '全部' },
        { id: '1', name: '门店下单' },
        { id: '2', name: '总部统配' }
      ],
      checkPld: '请输入完整收货单号或单号末尾数字',
      store_id: '',
      order_id: '',
    //   storeId: '',
      storeList: [],
      from: '0',
      type: '0',
      check_id: '1',
      formInline: {
        status: '1',
        order_id: '',
        purchase_id: '',
        supplier_id: '',
        from: '0',
        type: '0',
        receive_id:'0',
        receive_type:1
      },
      list: null,
      totalDataNumber: 1,
      currentPage: 1,
      saveForm: {
        order_id: '',
        order_list: []
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.list) {
        vm.getHouse();
        vm.getStore();
        vm.fetchData();
      }
    });
  },
  methods: {
    getStore() {
      getStoreList({ category_id: 488 }).then(response => {
        // if (response.length > 1) {
        //   response.unshift({ id: '0', name: '全部' });
        // }
        this.storeList = response;
        this.formInline.receive_id = this.storeList[0].id;
      });
    },
    searchClick() {
      this.fetchData();
    },
    getHouse() {
      getComHouse({}).then(response => {
        response.forEach(val => {
          val.name = val.house_name;
        });
        this.com_house_list = response;
        getStoreHouse({}).then(res => {
          this.stor_house_list = res;
          this.store_list = [...this.stor_house_list, ...this.com_house_list];
          this.store_id = this.store_list[0].house_id;
        });
      });
    },
    checkChange() {
      if (this.check_id == 1) {
        this.checkPld = '请输入完整收货单号或单号末尾数字';
      } else {
        this.checkPld = '请输入完整采购单号或单号末尾数字';
      }
    },
    getData(data) {
      data.forEach(val => {
        val.from_name = val.from == 1 ? '供应商' : '中央仓';
        val.type_name = val.type == 1 ? '门店下单' : '总部统配';
        val.status_name = val.status == 1 ? '待确认' : val.status == 2 ? '待收货' : val.status == 3 ? '收货中' : val.status == 4 ? '收货完成' : '已关闭';
      });
      this.list = data;
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.list = [];
      this.currentPage = 1;
      this.formInline.type = this.type;
      this.formInline.from = this.from;
      this.formInline.supplier_id = this.store_id;
      this.formInline.order_id = '';
      this.formInline.purchase_id = '';
      if (this.check_id == 1) {
        this.formInline.order_id = this.order_id;
      } else {
        this.formInline.purchase_id = this.order_id;
      }
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response * 20;
          getList(this.formInline)
            .then(res => {
              this.getData(res);
              this.listLoading = false;
            })
            .catch(res => {
              this.listLoading = false;
            });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        this.getData(response);
        this.listLoading = false;
      });
    }
  }
};
</script>